<template>
  <view v-if="currentCocId" class="member-module">
    <!-- <view class="member-module_item" @click="toPaymentDetail()">

    </view> -->
    <view class="module-top">
      <view class="member-info disFlxCC" @click="toPaymentDetail()">
        <view class="level-name disFlxAC">
          <image class="level-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/level-icon.png" />
          <text>{{ cocInfo.levelName }}</text>
        </view>
        <view class="member-info_time" :style="{ color: statusText.color }">
          <text>{{ statusText.text }}</text>
        </view>
      </view>
      <view
        v-if="userInfo.isOpenMall && cocInfo.memberRoleType === MemberRoleEnum.PRINCIPAL"
        class="mall-entrance disFlxAC"
        @click="navigateTo({ name: 'memberWelfareCenter' })"
      >
        <image class="gift-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/gift-icon.png" />
        <view class="entrance-text">
          <view style="font-size: 28rpx; font-weight: bolder; margin-bottom: 8rpx">
            <text>尊享福利</text>
            <text class="ali-icon icon-you1"></text>
          </view>
          <text>精选专属福利</text>
        </view>
      </view>
    </view>

    <view class="card-entry">
      <view class="card-entry_item" @click="navigateTo({ name: 'myUnit' })">
        <view class="ali-icon icon-danwei_fill" :style="{ color: globalConfig?.themeColor }"></view>
        <text>我的单位</text>
      </view>
      <view class="_line"></view>
      <view class="card-entry_item" @click="navigateTo({ name: 'personCard', options: {} })">
        <view
          class="ali-icon icon-shenfenmingpian"
          :style="{ color: globalConfig?.themeColor }"
        ></view>
        <text>个人名片</text>
      </view>
    </view>
  </view>
  <!-- <view
    v-else-if="userInfo.phonenumber && !userInfo.isPerfectionInfo"
    class="member-module disFlxJS"
    @click.stop="isLogin(editInformation)"
  >
    <view class="fz-14 ml-16">完善个人信息</view>
    <view class="mr-20">
      <text class="ali-icon fz-24" style="color: #999">&#xe6c7;</text>
    </view>
  </view> -->
</template>

<script setup lang="ts">
  import { paymentInfo, getMemberCount } from '@/api/mine';
  import { type IPaymentInfoRes } from '@/api/mine/types';
import { MemberRoleEnum } from '@/enums/memberRoleEnum';
  import { MemberOrderType } from '@/enums/membershipEnum';
  import { navigateTo } from '@/router';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { onPullDownRefresh } from '@dcloudio/uni-app';
  import { storeToRefs } from 'pinia';
  import { computed, ref, watch } from 'vue';

  const useUser = useUserStoreWithOut();
  const { globalConfig } = useAppStoreWithOut();
  const { currentCocId, cocInfo, userInfo } = storeToRefs(useUser);
  const sysUserId = computed(() => useUser.userInfo.sysUserId);
  const info = ref<IPaymentInfoRes>();

  if (sysUserId.value) {
    getMemberCount().then((r) => (memberCount.value = r));
  }

  const memberCount = ref(0);

  const editInformation = function () {
    // navigateTo({ name: 'editMyProfile', options: {} });
  };

  watch(currentCocId, (val) => val && getPaymentInfo(), {
    immediate: true,
  });

  function getPaymentInfo() {
    currentCocId.value &&
      paymentInfo(currentCocId.value).then((r) => {
        info.value = r;
      });
  }

  onPullDownRefresh(async () => {
    getPaymentInfo();
  });

  function toPaymentDetail() {
    navigateTo({
      name: 'awaitPay',
      options: { type: MemberOrderType.RENEW },
    });
  }

  const statusText = computed(() => {
    let text = `${info.value?.memberEndTime || ''} 到期`;
    let color = '#C08E6B';
    switch (info.value?.paymentStatus) {
      case 0:
        text = '待缴费';
        color = '#FF3434';
        break;
      case 2:
        text = '已临期，请续费';
        color = '#FF3434';
        break;
      case 3:
        text = '已过期，请续费';
        color = '#FF3434';
        break;
    }

    return {
      text,
      color,
    };
  });
</script>

<style lang="scss" scoped>
  .member-module {
    position: relative;
    margin-bottom: 30rpx;
    .module-top {
      height: 180rpx;
      background-image: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
      border-radius: 16rpx;
      display: flex;
      padding-left: 32rpx;
      .member-info,
      .mall-entrance {
        flex: 1;
        height: 160rpx;
        flex-shrink: 0;
      }
      .member-info {
        align-items: flex-start;
        .level-name {
          color: #92603e;
          font-size: 32rpx;
          font-weight: bolder;
          .level-icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 8rpx;
          }
        }
        &_time {
          font-size: 24rpx;
          margin-top: 8rpx;
        }
      }
      .mall-entrance {
        justify-content: center;
        .gift-icon {
          width: 96rpx;
          height: 96rpx;
          margin-right: 10rpx;
        }
        .entrance-text {
          color: #ea5e0e;
          font-size: 24rpx;
        }
      }
    }
    .card-entry {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      height: 136rpx;
      position: relative;
      border-radius: 16rpx;
      margin-top: -20rpx;
      ._line {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 1px;
        height: 63rpx;
        background-color: #ddd;
      }
      &_item {
        flex: 1;
        color: #808080;
        font-size: 28rpx;
        margin-bottom: 10rpx;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        color: #666664;
        .ali-icon {
          font-size: 56rpx;
        }
      }
    }
  }
</style>
